<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" href="../css/baseBottom.css">
</head>

<body>

	<!--底部-->
	<footer id="footer" class="foot">
		<!-- <div class="foot" id="botomer"> -->
		<!-- tapmode 延迟取消 ,点击加速的意思 -->
		<div class="bottomer foot-cur selected" tapmode="selected" onclick="fnSetNavMenuIndex(0)">
			<div><img class="foot-img" id="myimage1" style="display:none" src="../image/icon/dibu-Forma1@2x.png" alt="" /></div>
			<div><img class="foot-img" style="display: inline-block;" src="../image/icon/dibu-Forma2@2x.png" alt="" /></div>

			<div class="foot-font">车辆养护</div>
		</div>
		<div class="bottomer foot-store" tapmode="selected" onclick="fnSetNavMenuIndex(1)">
			<div><img class="foot-img" id="myimage2" style="display: inline-block;" src="../image/icon/db-2@2x.png" alt="" /></div>
			<div><img class="foot-img" style="display: none;" src="../image/icon/dibu-fjmd2@2x.png" alt="" /></div>

			<div class="foot-font">附近门店</div>
		</div>
		<div class="bottomer foot-pay" tapmode="selected" onclick="fnSetNavMenuIndex(2)">
			<div>
				<img class="foot-img" id="myimage3" style="display: inline-block;" src="../image/icon/db-3@2x.png" alt="" /></div>
			<div><img class="foot-img" style="display: none" src="../image/icon/dibu-czjf2@2x.png" alt="" /></div>

			<div class="foot-font">充值缴费</div>
		</div>
		<!-- </div> -->
	</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript">
	var bottomers;
	apiready = function() {
		console.log(3333);
		exitNowApp()
		fnOpenWalletFtame()
	};

	//退出APP
	function exitNowApp() {
		$api.setStorage('isFullScreen', 0);
		//按两次退出应用
		api.addEventListener({
			name: 'keyback'
		}, function(ret, err) {
			//全屏时 需要发送事件 并关闭全屏
			var isFullScreen = $api.getStorage('isFullScreen');
			console.log("isFullScreen" + isFullScreen);
			//如果全屏 只关闭全屏
			if (isFullScreen == 0) {
				api.toast({
					msg: '再点一次退出车车侠',
					duration: 2000,
					location: 'bottom'
				});
				api.addEventListener({
					name: 'keyback'
				}, function(ret, err) {
					if ($api.getStorage('isFullScreen' == "0")) {
						api.sendEvent({
							name: 'clickhome',
							extra: {}
						});
					} else {
						api.closeWidget({
							silent: true
						});
					}

				});
			}
			setTimeout(function() {}, 2000)
		});
	}
// 底部导航
	function fnOpenWalletFtame() {
		console.log(2123123);
		var bottomer = $api.byId('footer'); // 获取底部
		var footerH = $api.offset(footer).h; //获取底部的高度
		bottomers = $api.domAll(footer, '.bottomer'); //获取footer下的所有 frames
		var frames = [];
		api.openFrameGroup({
			name: 'group1',
			scrollEnabled: false,
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: api.winHeight - footerH - 0 //获取手机高度减去底部高度
			},
			index: 0,
			//  frames:frames
			frames: [{
				name: 'homepage_2',
				url: 'homepage_2.html',
			}, {
				name: 'NearbyStore',
				url: 'NearbyStore.html',
				bgColor: '#fff'
			}, {
				name: 'RechargePayment',
				url: 'RechargePayment.html',
				bgColor: '#fff'
			}]
		}, function(ret, err) {
			if (ret) {

				// console.log(JSON.stringify(ret));
				// console.log(ret.index);
				var index_ = ret.index;
				for (var i = 0; i < 2; i++) {
					if (i == index_) {
						var img_li_th = document.getElementsByClassName("bottomer")[index_];
						document.getElementsByClassName("foot-font")[index_].style.color = "#0A5AFA";
						// console.log(i);
						var imglist_th = $api.domAll(img_li_th, '.foot-img');
						imglist_th[0].style.display = "none";
						imglist_th[1].style.display = "inline-block";

					} else {
						var img_li_oth = document.getElementsByClassName("bottomer")[i];
						document.getElementsByClassName("foot-font")[i].style.color = "#AFAFAF";
						var imglist_oth = $api.domAll(img_li_oth, '.foot-img');
						imglist_oth[0].style.display = "inline-block";
						imglist_oth[1].style.display = "none";
					}
				}
			} else {
				console.log(JSON.stringify(err));
				// alert( JSON.stringify( err ) );
			}
			// fnSetNavMenuIndex(ret.index);
		});
	};
	// 点击效果切换
	function fnSetNavMenuIndex(index_) {
		// console.log(index_);
		var ind = index_;
		for (var i = 0; i < 3; i++) {
			if (i == ind) {
				var img_li_th = document.getElementsByClassName("bottomer")[ind]
				document.getElementsByClassName("foot-font")[ind].style.color = "#0A5AFA";
				// console.log(i);
				var imglist_th = $api.domAll(img_li_th, '.foot-img');
				imglist_th[0].style.display = "none";
				imglist_th[1].style.display = "inline-block";
			} else {
				var img_li_oth = document.getElementsByClassName("bottomer")[i]
				document.getElementsByClassName("foot-font")[i].style.color = "#AFAFAF";
				var imglist_oth = $api.domAll(img_li_oth, '.foot-img');
				imglist_oth[0].style.display = "inline-block";
				imglist_oth[1].style.display = "none";
			}
		}
		// alert(ind)
		api.setFrameGroupIndex({
			name: 'group1',
			index: index_,
			scroll: true,
			// reload: true,
		});
	}
</script>

</html>
